<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/font/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">

    <title>QQ音乐</title>
</head>
<body>
    <!-- 头部 -->
    <header class="header-wrapper w100">
        <div class="header-box w1600">
            <div class="header-nav">
                <div class="logo">
                    <a href="#" class="logo-a">
                        <img src="images/logo.png" class="logo-img">
                    </a>
                </div>
                <nav class="mainnav">
                    <ul class="mainnav-ul">
                        <li class="mainnav-li active">
                            <a href="#" class="mainnav-a">音乐馆</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">我的音乐</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">客户端</a>
                            <img src="images/mark_1.png" alt="" class="mark-img">
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">开放平台</a>
                        </li>
                        <li class="mainnav-li">
                            <a href="#" class="mainnav-a">VIP</a>
                        </li>
                    </ul>
                </nav>
                <!-- 搜索 -->
                <div class="search">
                    <form action="">
                        <button class="btn-search"></button>
                        <input type="text" name="keywords" id="keywords" placeholder="搜索音乐、MV、歌单、用户" class="search-input" autocomplete="off">
                        <div class="search-wrapper">
                            <div class="search-drop">
                                <ul class="search-drop-ul">
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">1</span>
                                            <p class="search-title">我们的歌我们的歌我们的歌</p>
                                            <span class="count">765.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">2</span>
                                            <p class="search-title">梦华录主题曲</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">3</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">4</span>
                                            <p class="search-title">爱你——王心凌</p>
                                            <span class="count">165.6万</span>
                                        </a>
                                    </li>
                                    <li class="search-drop-li">
                                        <a href="#" class="search-drop-a">
                                            <span class="num">5</span>
                                            <p class="search-title">星辰大海</p>
                                            <span class="count">65.6万</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 用户 -->
                <div class="user">
                    <a href="#" class="btn-login">登录</a>
                    <div class="btn btn-vip user-btn">
                        <span class="btn-content">开通VIP</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">开通绿钻豪华版</a>
                            <a href="#" class="drop-menu-a">开通付费包</a>
                        </div>
                    </div>
                    <div class="btn btn-money user-btn">
                        <span class="btn-content">充值</span>
                        <div class="drop-menu">
                            <a href="#" class="drop-menu-a">购买乐比</a>
                            <a href="#" class="drop-menu-a">充值饭票</a>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="subnav">
                <ul class="subnav-ul">
                    <li class="subnav-li active">
                        <a href="index.html" class="subnav-a">首页</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">歌手</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">新碟</a>
                    </li>
                    <li class="subnav-li">
                        <a href="top.html" class="subnav-a">排行榜</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">分类歌单</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">MV</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">电台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">数字专辑</a>
                    </li>
                    <li class="subnav-li">
                        <a href="ticket.html" class="subnav-a">票务</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <!-- 模块 -->
    <section class="section w100">
        <div class="section-wrapper w1600">
            <h2 class="section-h2"><span class="none">qq音乐歌单推荐</span></h2>
            <nav class="subnav mb20">
                <ul class="subnav-ul">
                    <li class="subnav-li active">
                        <a href="#" class="subnav-a">为你推荐</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">网络歌曲</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">轻音乐</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">排行榜</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">分类歌单</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">MV</a>
                    </li>
                </ul>
            </nav>
            <div class="section-container mb50">
                <ul class="section-pro">
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/1.jpg" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/2.jpg" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/3.jpg" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/4.jpg" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/5.jpg" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/6.png" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/7.png" class="music-cover">
                                <i class="icon-play"></i>
                            </a> 
                        </div>
                        <div class="section-pro-text">
                            <h3 class="section-h3">
                                <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                            </h3>
                            <p class="section-desc">播放量：<span class="color3">2188.9</span>万</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="section-pagebar">
                <ul class="section-pagebar-ul">
                    <li class="section-pagebar-li active"></li>
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                </ul>
            </div>
        </div>
        <div class="btn-page btn-prev">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="btn-page btn-next">
            <i class="iconfont icon-gengduo"></i>
        </div>
        
    </section>
    <section class="section w100 section1">
        <div class="section-wrapper w1600 pr">
            <h2 class="section-h2"><span class="none">QQ音乐新歌首发</span></h2>
            <div class="btn-playall btn-box">
                <a href="#" class="btn-box-a">
                    <i class="iconfont icon-player-play"></i><span class="btn-box-text">播放全部</span></a>
            </div>
            <nav class="subnav mb20">
                <ul class="subnav-ul">
                    <li class="subnav-li active">
                        <a href="#" class="subnav-a">最新</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">内地</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">港台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">欧美</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">韩国</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">日本</a>
                    </li>
                </ul>
            </nav>
            <div class="section-container mb50">
                <ul class="section-pro">
                    <li class="section-pro-item">
                        <ul class="section-pro-sub">
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/1.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">LÜCY</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/2.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">LÜCY</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/3.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">LÜCY</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/4.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="阿丽塔">阿丽塔</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/5.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="阿丽塔">阿丽塔</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/2.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">LÜCY</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/3.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">LÜCY</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/4.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="阿丽塔">阿丽塔</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                            <li class="section-pro-subitem">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/newmusic/5.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="阿丽塔">阿丽塔</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                                <div class="section-desc"> 03:45</div>
                            </li>
                        </ul>   
                    </li>
                    
                </ul>
            </div>
            <div class="section-pagebar">
                <ul class="section-pagebar-ul">
                    <li class="section-pagebar-li active"></li>
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                </ul>
            </div>
        </div>
        <div class="btn-page btn-prev">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="btn-page btn-next">
            <i class="iconfont icon-gengduo"></i>
        </div>
        
    </section>
    <section class="section w100 section2">
        <div class="section-wrapper w1600">
            <h2 class="section-h2"><span class="none">精彩推荐</span></h2>
            <div class="section-container mb50">
                <ul class="section-pro">
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/comment/1.webp" class="music-cover">
                            </a> 
                        </div>
                    </li>
                    <li class="section-pro-item">
                        <div class="section-pro-box">
                            <a href="#" class="section-pro-box-a">
                                <img src="images/upload/comment/2.webp" class="music-cover">
                            </a> 
                        </div>
                    </li>

                    
                </ul>
            </div>
            <div class="section-pagebar">
                <ul class="section-pagebar-ul">
                    <li class="section-pagebar-li active"></li>
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                </ul>
            </div>
        </div>
        <div class="btn-page btn-prev">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="btn-page btn-next">
            <i class="iconfont icon-gengduo"></i>
        </div>
        
    </section>
    <section class="section w100 section3">
        <div class="section-wrapper w1600 pr">
            <h2 class="section-h2"><span class="none">QQ音乐新歌首发</span></h2>
            <div class="more">
                <a class="more-a" href="#"><span>更多</span><i class="iconfont icon-gengduo"></i></a>
            </div>
            <nav class="subnav mb20">
                <ul class="subnav-ul">
                    <li class="subnav-li active">
                        <a href="#" class="subnav-a">最新</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">内地</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">港台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">欧美</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">韩国</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">日本</a>
                    </li>
                </ul>
            </nav>
            <div class="section-container mb50">
                <ul class="section-pro">
                    <li class="section-pro-item">
                        <ul class="section-pro-sub">
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/1.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/2.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/3.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/4.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/5.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/6.png" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/7.png" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/1.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/2.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/3.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                </div>
                            </li>
                        </ul>   
                    </li>
                    
                </ul>
            </div>
            <div class="section-pagebar">
                <ul class="section-pagebar-ul">
                    <li class="section-pagebar-li active"></li>
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                </ul>
            </div>
        </div>
        <div class="btn-page btn-prev">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="btn-page btn-next">
            <i class="iconfont icon-gengduo"></i>
        </div>
        
    </section>
    <section class="section w100 section4">
        <div class="section-wrapper w1600 pr">
            <h2 class="section-h2"><span class="none">排行榜</span></h2>
            <div class="more">
                <a class="more-a" href="#"><span>更多</span><i class="iconfont icon-gengduo"></i></a>
            </div>
            
            <div class="section-container mb50">
                <ul class="section-top">
                    <li class="section-top-li">
                        <h3 class="section-top-h3">
                            <a href="#" class="section-top-a">热歌</a>
                        </h3>
                        <div class="line"></div>
                        <i class="icon-play"></i>
                        <ul class="section-top-list">
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">2</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">I Like You (A Happier Song) (Explicit)</a></h4>
                                    <p><a href="#" class="section-top-author">Post Malone/Doja Cat</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="section-top-li">
                        <h3 class="section-top-h3">
                            <a href="#" class="section-top-a">新歌</a>
                        </h3>
                        <div class="line"></div>
                        <i class="icon-play"></i>
                        <ul class="section-top-list">
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">2</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">I Like You (A Happier Song) (Explicit)</a></h4>
                                    <p><a href="#" class="section-top-author">Post Malone/Doja Cat</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="section-top-li">
                        <h3 class="section-top-h3">
                            <a href="#" class="section-top-a">流行指数</a>
                        </h3>
                        <div class="line"></div>
                        <i class="icon-play"></i>
                        <ul class="section-top-list">
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">2</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">ZOOM</a></h4>
                                    <p><a href="#" class="section-top-author">Post Malone/Doja Cat</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="section-top-li">
                        <h3 class="section-top-h3">
                            <a href="#" class="section-top-a">欧美</a>
                        </h3>
                        <div class="line"></div>
                        <i class="icon-play"></i>
                        <ul class="section-top-list">
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">2</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">你要快乐</a></h4>
                                    <p><a href="#" class="section-top-author">时代少年团</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li class="section-top-li">
                        <h3 class="section-top-h3">
                            <a href="#" class="section-top-a">韩国</a>
                        </h3>
                        <div class="line"></div>
                        <i class="icon-play"></i>
                        <ul class="section-top-list">
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">2</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">可</a></h4>
                                    <p><a href="#" class="section-top-author">薛之谦/张靓颖</a></p>
                                </div>
                            </li>
                            <li class="section-top-item">
                                <div class="section-top-num">1</div>
                                <div class="section-top-content">
                                    <h4><a href="#" class="section-top-title">妈妈的话</a></h4>
                                    <p><a href="#" class="section-top-author">Zyboy忠宇</a></p>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            
        </div>
        
        
    </section>
    <section class="section w100 section5">
        <div class="section-wrapper w1600 pr">
            <h2 class="section-h2"><span class="none">QQ音乐新歌首发</span></h2>
            <div class="more">
                <a class="more-a" href="#"><span>更多</span><i class="iconfont icon-gengduo"></i></a>
            </div>
            <nav class="subnav mb20">
                <ul class="subnav-ul">
                    <li class="subnav-li active">
                        <a href="#" class="subnav-a">最新</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">内地</a>
                    </li>
                    <li class="subnav-li ">
                        <a href="#" class="subnav-a">港台</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">欧美</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">韩国</a>
                    </li>
                    <li class="subnav-li">
                        <a href="#" class="subnav-a">日本</a>
                    </li>
                </ul>
            </nav>
            <div class="section-container mb50">
                <ul class="section-pro">
                    <li class="section-pro-item">
                        <ul class="section-pro-sub">
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/1.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/2.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/3.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/4.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/5.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/1.jpg" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/2.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/3.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/4.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                            <li class="section-pro-subitem1">
                                <div class="section-pro-box">
                                    <a href="#" class="section-pro-box-a">
                                        <img src="images/upload/mv/5.webp" class="music-cover">
                                        <i class="icon-play"></i>
                                    </a> 
                                </div>
                                <div class="section-pro-text">
                                    <h3 class="section-h3">
                                        <a href="#" class="section-h3-a" title="【丧系歌单】他总是不懂我的爱">【丧系歌单】他总是不懂我的爱他总是不懂我的爱他总是不懂我的爱</a>
                                    </h3>
                                    <p class="section-desc"><a href="#" class="section-desc-author">水木年华</a></p>
                                    <div class="section-count">
                                        <div class="section-count-icon"></div>
                                        <div class="section-count-num">245</div>
                                    </div>
                                </div>
                            </li>
                           
                        </ul>   
                    </li>
                    
                </ul>
            </div>
            <div class="section-pagebar">
                <ul class="section-pagebar-ul">
                    <li class="section-pagebar-li active"></li>
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                    <li class="section-pagebar-li"></li>
                    <li class="section-pagebar-li"></li>                    
                </ul>
            </div>
        </div>
        <div class="btn-page btn-prev">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <div class="btn-page btn-next">
            <i class="iconfont icon-gengduo"></i>
        </div>
        
    </section>
   
    <!-- 尾部 -->
    <footer class="footer w100">
        <div class="footer-wrapper w1600">
            <div class="footer-top">
                <div class="footer-item">
                    <h5 class="footer-title">下载QQ音乐客户端</h5>
                    <ul class="footer-item-ul">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon0"></div>
                                <span>PC版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon1"></div>
                                <span>Mac版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon2"></div>
                                <span>Android版</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon3"></div>
                                <span>iPhone版</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">特色产品</h5>
                    <ul class="footer-item-wrap">
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon4"></div>
                                <span>全民K歌</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon5"></div>
                                <span>银河音效</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon6"></div>
                                <span>QPlay</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <div class="footer-icon footer-icon7"></div>
                                <span>Fan直播伴侣</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>车载互联</span>
                            </a>
                        </li>
                        <li class="footer-item-li">
                            <a href="#" class="footer-item-a">
                                <span>QQ演出</span>
                            </a>
                        </li>

                        
                    </ul>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">合作链接</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                        <a href="#" class="footer-link">手机QQ空间</a>
                        <a href="#" class="footer-link">最新版QQ</a>
                        <a href="#" class="footer-link">腾讯社交广告</a>
                        <a href="#" class="footer-link">电脑管家</a>
                        <a href="#" class="footer-link">CJ ENM</a>
                        <a href="#" class="footer-link">腾讯视频</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">开放平台</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">QQ音乐开放平台</a>
                        <a href="#" class="footer-link">腾讯音乐人</a>
                        <a href="#" class="footer-link">音乐推</a>
                    </div>
                </div>
                <div class="footer-item">
                    <h5 class="footer-title">TME集团官网</h5>
                    <div class="footer-links">
                        <a href="#" class="footer-link">腾讯音乐</a>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="footer-copyright-links">
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">关于腾讯</a>
                    <a href="#" class="footer-copyright-a">About Tencent</a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                    <a href="#" class="footer-copyright-a">服务条款</a>
                    <a href="#" class="footer-copyright-a">用户服务协议 </a>
                </div>
                <p class="footer-copyright-text">Copyright © 1998 - 2022 Tencent. <a href="#">All Rights Reserved.</a></p>
                <div class="footer-copyright-links">
                    腾讯公司
                    <a href="#" class="footer-copyright-a">版权所有</a>
                    <a href="#" class="footer-copyright-a">营业执照</a>
                    <span class="footer-copyright-a">网络文化经营许可证：<a href="#">粤网文[2020]3396-195号</a></span>
                    <span class="footer-copyright-a">客服电话：<a href="#">4006016666</a></span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 侧边 -->
    <aside class="aside">
        
        <a href="#" class="aside-box-a">
            <span class="aside-icon back"></span>
        </a>
        <a href="#" class="aside-box-a">
            反馈
        </a>
        <a href="#" class="aside-box-a">
            <span class="aside-icon music"></span>
        </a>
        
    </aside>
</body>
</html>